<template>
  <el-dialog v-model="visible" title="退款订单">
    <el-table
      v-loading="loading"
      show-overflow-tooltip
      stripe
      border
      :data="tableData"
      height="400"
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="60" />
      <el-table-column prop="orderNo" label="订单编号" width="260" />
      <el-table-column prop="username" label="用户名称" width="120" />
      <el-table-column prop="statusName" label="状态" width="120" />
      <el-table-column prop="amount" label="充值数量" width="100" />
      <el-table-column prop="points" label="积分数量" width="120" />
      <el-table-column prop="toAddress" label="充值地址" width="330" />
      <el-table-column
        prop="createTime"
        :formatter="val => handleAutoUTC8(val.createTime)"
        label="创建时间"
        min-width="200"
      />
      <el-table-column
        prop="expireTime"
        label="过期时间"
        :formatter="val => handleAutoUTC8(val.expireTime)"
        min-width="200"
      />
    </el-table>
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[10, 20, 40, 50]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-dialog>
</template>

<script lang="ts" setup>
import { handleAutoUTC8 } from "@/utils/tools";
import { ref, reactive } from "vue";
import { getRefundRequests } from "@/api/adminPayApi";
const visible = ref(false);
const loading = ref(false);
const pagination = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1
});
const tableData = ref([]);
const onSearch = async () => {
  try {
    loading.value = true;
    const params = {
      page: pagination.currentPage,
      size: pagination.pageSize
    };
    const { data } = await getRefundRequests(params);
    const { records, total, size, current } = data;
    tableData.value = records;
    pagination.total = total;
    pagination.pageSize = size;
    pagination.currentPage = current;
  } finally {
    loading.value = false;
  }
};
const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
  pagination.currentPage = 1;
  onSearch();
};
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
  onSearch();
};
const open = () => {
  visible.value = true;
  pagination.currentPage = 1;
  onSearch();
};

defineExpose({ open });
</script>
<style scoped>
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
